<template>
	<view>
		<view class="s1">
			{{titles}}
		</view>
		<view class="xin mt-40">

		</view>
		<view class="mt-36" style="display: flex;align-items: center;">
			<image v-if="titles=='查看钱包地址'" style="width: 50rpx;height: 50rpx;"
				src="../../../static/images/home/zhu4.png" mode=""></image>
			<view class="s2 ml-20">
				BNB
			</view>
		</view>
		<view class="input w100 mt-100"
			style="display: flex;align-items: center;color: rgba(148, 149, 155, 1);padding: 0 30rpx;"
			v-if="titles=='查看钱包地址'">
			{{userInfo.my_address.replace(/^(.{5})(?:\d+)(.{5})$/,"$1******$2")}}
			<!-- item.cardNo.replace(/^(.{4})(?:\d+)(.{4})$/,"$1******$2") -->
		</view>

		<!-- 修改昵称 -->
		<view class="input w100 mt-100" style="display: flex;align-items: center;" v-if="titles=='修改昵称'">
			<u--input style="margin-left: 32rpx;" placeholder="请输入昵称"color='#fff' border="none" v-model="nickname"
				@change="change"></u--input>
		</view>
		<!-- 修改登陆密码 -->
		<view class="input w100 mt-100" style="display: flex;align-items: center;" v-if="titles=='修改登陆密码'">
			<u--input style="margin-left: 32rpx;color: #fff;" placeholder="请输入注册手机号" color='#fff' border="none"
				v-model="phone" @change="change"></u--input>
		</view>
		<view class="input w100 mt-100" style="display: flex;align-items: center;" v-if="titles=='修改登陆密码'">
			<u--input style="margin-left: 32rpx;color: #fff;" placeholder="请输入验证码" border="none" color='#fff'
				v-model="value" @change="change"></u--input>
			<view class="">
				<view class="resending flex-center" v-if="isSending">{{ '重新发送(' + counter + 's)' }}</view>
				<view class="resending flex-center" v-else @click="handleResend">发送验证码</view>
			</view>
		</view>
		<view class="input w100 mt-100" style="display: flex;align-items: center;" v-if="titles=='修改登陆密码'">
			<u--input style="margin-left: 32rpx;" placeholder="请输入新密码" border="none" v-model="value" color='#fff'
				@change="change"></u--input>
		</view>
		<!-- 修改登陆密码 -->
		<view class="input w100 mt-100" style="display: flex;align-items: center;" v-if="titles=='修改交易密码'">
			<u--input style="margin-left: 32rpx;color: #fff;" placeholder="请输入手机号" color='#fff' border="none"
				v-model="phone" @change="change"></u--input>
		</view>
		<view class="input w100 mt-100" style="display: flex;align-items: center;" v-if="titles=='修改交易密码'">
			<u--input style="margin-left: 32rpx;color: #fff;" placeholder="请输入验证码" border="none" color='#fff'
				v-model="code" @change="change"></u--input>
			<view class="">
				<view class="resending flex-center" v-if="isSending">{{ '重新发送(' + counter + 's)' }}</view>
				<view class="resending flex-center" v-else @click="handleResend">发送验证码</view>
			</view>
		</view>
		<view class="input w100 mt-100" style="display: flex;align-items: center;" v-if="titles=='修改交易密码'">
			<u--input style="margin-left: 32rpx;color: #fff;"color='#fff' placeholder="请输入新交易密码" border="none" v-model="password"
				@change="change"></u--input>
		</view>

		<view @click="upmi" class="busts flex-center " v-if="titles!='查看钱包地址'">
			立即修改
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickname:'',
				password:'',
				code:'',
				titles: '',
				value: '',
				phone: '',
				counter: 60,
				isSending: false,
				address:""
			}
		},
		onLoad(e) {
			this.getUserInfo()
			console.log(this.userInfo,'9999');
			this.titles = e.name
			uni.setNavigationBarTitle({
				title: e.name
			})
			console.log(this.titles);

		},
		methods: {
			async upmi(){
				let pass_field=''
				let url=''
				if(this.titles=='修改交易密码'){
					pass_field='pay_pass'
					 url='user/update_user_pass'
				}
				if(this.titles=='修改登陆密码'){
					pass_field='password'
					url='user/update_user_pass'
				}
				if(this.titles=='修改昵称'){
					url='user/update_nickname_headimgurl'
				}
				
				let res=await this.$http.post(url, {
					phone:this.phone,
					password:this.password,
					pass_field:pass_field,
					nickname:this.nickname,
					ver_code:this.code
				})
				if(res){
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/uset/uset'
						})
					},500)
				
				}
			},
			// 重置倒计时
			reset() {
				this.isSending = false
				if (this.timer) {
					clearInterval(this.timer)
					this.counter = 60
					this.timer = null
				}
			},
			// 倒计时
			countDown() {
				this.counter = 60
				this.isSending = true
				this.timer = setInterval(() => {
					this.counter--
					if (this.counter < 0) {
						this.reset()
					}
				}, 1000)
			},
			handleResend() {
				if (this.phone == '') {
					uni.showToast({
						title: "请填写手机号",
						icon: 'none'
					})
					return
				}
				this.countDown()

			},
			change(e) {
				console.log('change', e);
			}
		}
	}
</script>

<style>
	page {
		background-color: #1E2240;
		padding: 30rpx 50rpx;
	}

	.busts {
		width: 628rpx;
		position: fixed;
		bottom: 68rpx;
		height: 80rpx;
		border-radius: 100rpx;
		background: linear-gradient(266.84deg, rgba(0, 20, 255, 1) 0%, rgba(128, 31, 240, 1) 50%, rgba(255, 44, 223, 1) 100%);
		font-size: 32rpx;
		font-weight: 400;
		color: #fff;
	}

	.resending {
		width: 183rpx;
		height: 85rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #fff;
		border-radius: 20rpx;
		background: rgba(30, 31, 35, 1);
	}

	.s1 {
		font-size: 36rpx;
		font-weight: 400;
		color: #fff;



	}

	.s2 {
		font-size: 32rpx;
		font-weight: 600;
		color: #fff;
	}

	.xin {
		width: 174rpx;
		height: 8rpx;
		opacity: 1;
		border-radius: 8rpx;
		background: rgba(41, 114, 255, 1);
	}

	.input {
		height: 112rpx;

		border-radius: 28rpx;
		background: rgba(33, 34, 68, 1);


	}
</style>